/*
This class draws the main window of the widget.
*/
function DrawnManager( screen, x, y, width, height, layout ) {
    var area = screen.appendElement( "<div x=\""+x+"\" y=\""+y+"\" width=\""+width+"\" height=\""+height+"\"></div>" );
    var src;
    var self = this;
    
    src = "resources\\manager\\layout_" + layout + "\\topoCantoEsquerdo.png";
    this.frameTopLeft = area.appendElement( " <div enabled=\"true\" x=\"0\" y=\"0\" width=\"13\" height=\"31\" background=\""+src+"\"></div> " );

    src = "resources\\manager\\layout_" + layout + "\\topoCantoDireito.png";
    this.frameTopRight = area.appendElement( " <div enabled=\"true\" x=\""+(width-13)+"\" y=\"0\" width=\"13\" height=\"31\" background=\""+src+"\"></div> " );

    src = "resources\\manager\\layout_" + layout + "\\topoBarra.png";
    this.frameTop = area.appendElement( " <div enabled=\"true\" x=\"13\" y=\"0\" width=\""+(width-13-13)+"\" height=\"31\" background=\""+src+"\"></div> " );

    src = "resources\\manager\\layout_" + layout + "\\baixoCantoEsquerdo.png";
    this.frameBottomLeft = area.appendElement( " <div enabled=\"true\" x=\"0\" y=\""+(height-26)+"\" width=\"11\" height=\"26\" background=\""+src+"\"></div> " );

    src = "resources\\manager\\layout_" + layout + "\\baixoCantoDireito.png";
    this.frameBottomRight = area.appendElement( " <div enabled=\"true\" x=\""+(width-12)+"\" y=\""+(height-26)+"\" width=\"12\" height=\"26\" background=\""+src+"\"></div> " );

    src = "resources\\manager\\layout_" + layout + "\\baixoBarra.png";
    this.frameBottom = area.appendElement( " <div enabled=\"true\" x=\"11\" y=\""+(height-26)+"\" width=\""+(width-12-11)+"\" height=\"26\" background=\""+src+"\"></div> " );

    src = "resources\\manager\\layout_" + layout + "\\pixelParaLinhaLateral.png";
    this.frameLeft = area.appendElement( " <div x=\"0\" y=\"31\" width=\"1\" height=\""+(height-31-26)+"\" background=\""+src+"\"></div> " );
    this.frameRight = area.appendElement( " <div x=\""+(width-1)+"\" y=\"31\" width=\"1\" height=\""+(height-31-26)+"\" background=\""+src+"\"></div> " );

    src = "resources\\manager\\layout_" + layout + "\\topoSetaEsquerda.png";
    this.buttonPrevProj = area.appendElement( " <div enabled=\"true\" opacity=\"92\" x=\"12\" y=\"7\" width=\"12\" height=\"16\" background=\""+src+"\"></div> " );
    this.buttonPrevProj.onclick = function() {
        user.prevProject();
        updateGui( user.getProject() );
    };
    this.buttonPrevProj.tooltip = TOOLTIP_PREVIOUSPROJECT;

    src = "resources\\manager\\layout_" + layout + "\\topoSetaDireita.png";
    this.buttonNextProj = area.appendElement( " <div enabled=\"true\" opacity=\"92\" x=\""+(width-12-12)+"\" y=\"7\" width=\"12\" height=\"16\" background=\""+src+"\"></div> " );
    this.buttonNextProj.onclick = function() {
        user.nextProject();
        updateGui( user.getProject() );
    };
    this.buttonNextProj.tooltip = TOOLTIP_NEXTPROJECT;
    
    this.projectLabel = area.appendElement(" <label enabled=\"true\" x=\"25\" y=\"6\" width=\""+(width-25-25)+"\" height=\"18\" color=\"#FFFFFF\" font=\"Verdana\" size=\"10\" bold=\"true\" align=\"center\"></label>");
    this.projectEditbox = area.appendElement(" <edit enabled=\"false\" visible=\"false\" x=\"25\" y=\"7\" width=\""+(width-25-25-1)+"\" height=\"18\" color=\"#FFFFFF\" background=\"#0071bc\" font=\"Verdana\" size=\"10\" bold=\"true\" align=\"left\" value=\""+"Projeto"+"\" />");
    this.projectLabel.ondblclick = function() {
        self.projectEditbox.value = self.projectLabel.innerText;
        self.projectLabel.visible = false;
        self.projectEditbox.visible = true;
        self.projectEditbox.enabled = true;
        self.projectEditbox.focus();
        self.projectEditbox.selectAll();
    };
    this.projectEditbox.onkeydown = function() {
        // On pressing RETURN
        if (event.keyCode==13) {
            self.projectLabel.visible = true;
            self.projectEditbox.visible = false;
            self.projectEditbox.enabled = false;
            if (self.projectEditbox.value!="") {
                //self.projectLabel.innerText = self.projectEditbox.value;
                changeProjectName( self.projectEditbox.value );
                updateGui( user.getProject() );
            }
        }
    };
    this.projectEditbox.onfocusout = function() {
        self.projectLabel.visible = true;
        self.projectEditbox.visible = false;
        self.projectEditbox.enabled = false;
        if (self.projectEditbox.value!="") {
            changeProjectName( self.projectEditbox.value );
            updateGui( user.getProject() );
        }
    };

    src = "resources\\manager\\nomeCastor.png";
    this.slogan = area.appendElement( " <div enabled=\"true\" opacity=\"50\" x=\""+(width-60-5)+"\" y=\""+(height-25)+"\" width=\"60\" height=\"25\" background=\""+src+"\"></div> " );
    

    src = "resources\\manager\\layout_" + layout + "\\botaoSync.png";
    this.buttonSync = area.appendElement( " <div enabled=\"true\" x=\""+(8)+"\" y=\""+(height-20-2)+"\" width=\"22\" height=\"20\" background=\""+src+"\"></div> " );
    this.buttonSync.onmouseup = function() { self.buttonSync.background = "resources\\manager\\layout_" + layout + "\\botaoSync.png"; };
    this.buttonSync.onmousedown = function() { self.buttonSync.background = "resources\\manager\\layout_" + layout + "\\botaoSyncApertado.png"; };
    this.buttonSync.onclick = function() {
        self.sortPostIts();
    };
    this.buttonSync.tooltip = TOOLTIP_BUTTONSORT;

    src = "resources\\manager\\layout_" + layout + "\\botaoSetaEsquerda.png";
    this.buttonPrev = area.appendElement( " <div enabled=\"true\" x=\""+(8+22+1)+"\" y=\""+(height-20-2)+"\" width=\"16\" height=\"20\" background=\""+src+"\"></div> " );
    this.buttonPrev.onclick = function() {
        self.prevPage();
        if (self.page == 0) {
            self.buttonPrev.background = "resources\\manager\\layout_" + layout + "\\botaoSetaEsquerdaApagado.png";
            self.buttonPrev.enabled = false;
        }
        else {
            self.buttonNext.background = "resources\\manager\\layout_" + layout + "\\botaoSetaDireita.png";
            self.buttonNext.enabled = true;
        }
    };
    this.buttonPrev.onmouseup = function() { self.buttonPrev.background = "resources\\manager\\layout_" + layout + "\\botaoSetaEsquerda.png"; };
    this.buttonPrev.onmousedown = function() { self.buttonPrev.background = "resources\\manager\\layout_" + layout + "\\botaoSetaEsquerdaApertado.png"; };
    this.buttonPrev.tooltip = TOOLTIP_PREVIOUSSLIDE;
    
    src = "resources\\manager\\layout_" + layout + "\\botaoMeioDasSetas.png";
    this.buttonMiddle = area.appendElement( " <div enabled=\"true\" x=\""+(8+22+1+16)+"\" y=\""+(height-20-2)+"\" width=\"1\" height=\"20\" background=\""+src+"\"></div> " );
    
    src = "resources\\manager\\layout_" + layout + "\\botaoSetaDireita.png";
    this.buttonNext = area.appendElement( " <div enabled=\"true\" x=\""+(8+22+1+16+1)+"\" y=\""+(height-20-2)+"\" width=\"16\" height=\"20\" background=\""+src+"\"></div> " );
    this.buttonNext.onclick = function() {
        self.nextPage();
        if (self.page == 3) {
            self.buttonNext.background = "resources\\manager\\layout_" + layout + "\\botaoSetaDireitaApagado.png";
            self.buttonNext.enabled = false;
        }
        else {
            self.buttonPrev.background = "resources\\manager\\layout_" + layout + "\\botaoSetaEsquerda.png";
            self.buttonPrev.enabled = true;
        }
    };
    this.buttonNext.onmouseup = function() { self.buttonNext.background = "resources\\manager\\layout_" + layout + "\\botaoSetaDireita.png"; };
    this.buttonNext.onmousedown = function() { self.buttonNext.background = "resources\\manager\\layout_" + layout + "\\botaoSetaDireitaApertado.png"; };
    this.buttonNext.tooltip = TOOLTIP_NEXTSLIDE;

    this.containerDisplayArea = area.appendElement(" <div x=\"1\" y=\"31\" width=\""+(width-1-1)+"\" height=\""+(height-31-26)+"\"></div> ");
    this.containerArea = this.containerDisplayArea.appendElement(" <div x=\"0\" y=\"0\" width=\""+(198*4)+"\" height=\"800\"></div> ");
    
    this.layout = layout;
    
    src = "resources\\manager\\layout_" + layout + "\\background.png";
    this.containerBackground = this.containerArea.appendElement("<div enabled=\"true\" x=\"0\" y=\"0\" width=\""+(198*4)+"\" height=\"800\" background=\""+src+"\"></div>");
    this.area = area;
    this.page = 0;
}

/*
    DrawnManager.resize( new width, new height )
*/
DrawnManager.prototype.resize = function(width,height) {
    this.area.width = width;
    this.area.height = height;
    this.frameTopRight.x = (width-13);
    this.frameTop.width = (width-13-13);
    this.frameBottomLeft.y = (height-26);
    this.frameBottomRight.x = (width-12);
    this.frameBottomRight.y = (height-26);
    this.frameBottom.y = (height-26);
    this.frameBottom.width = (width-12-11);
    this.frameLeft.height = (height-31-26);
    this.frameRight.x = (width-1);
    this.frameRight.height = (height-31-26);
    this.buttonNextProj.x = (width-12-12);
    this.projectLabel.width = (width-25-25);
    this.projectEditbox.width = (width-25-25-1);
    this.buttonSync.y = (height-20-2);
    this.buttonPrev.y = (height-20-2);
    this.buttonMiddle.y = (height-20-2);
    this.buttonNext.y = (height-20-2);
    this.slogan.x = (width-60-5);
    this.slogan.y = (height-25);
    this.containerDisplayArea.width = (width-1-1);
    this.containerDisplayArea.height = (height-31-26);
    //debug.info("containerArea: " + (width-1-1) + "x" + (height-31-26));
};

DrawnManager.prototype.setPage = function(page) {
    if (page==null){ page = this.page; }
    
    this.buttonPrev.background = "resources\\manager\\layout_" + this.layout + "\\botaoSetaEsquerda.png";
    this.buttonPrev.enabled = true;
    this.buttonNext.background = "resources\\manager\\layout_" + this.layout + "\\botaoSetaDireita.png";
    this.buttonNext.enabled = true;
    if (page == 3) {
        this.buttonNext.background = "resources\\manager\\layout_" + this.layout + "\\botaoSetaDireitaApagado.png";
        this.buttonNext.enabled = false;
    }
    if (page == 0) {
        this.buttonPrev.background = "resources\\manager\\layout_" + this.layout + "\\botaoSetaEsquerdaApagado.png";
        this.buttonPrev.enabled = false;
    }
    
    if (this.anim != null) {
        cancelAnimation(this.anim);
        this.anim = null;
    }
    this.page = page;
    this.containerArea.x = -this.page*this.containerDisplayArea.width;
    options.putValue("page",this.page);
}

DrawnManager.prototype.nextPage = function() {
    if (this.page < 3) {
        if (this.anim == null) {
            this.anim = beginAnimation("SlideAnim()",this.containerArea.x,this.containerArea.x-this.containerDisplayArea.width,parameters.slideDelay);
        } else {
            cancelAnimation(this.anim);
            this.anim = null;
            this.setPage(this.page);
            this.anim = beginAnimation("SlideAnim()",this.containerArea.x,this.containerArea.x-this.containerDisplayArea.width,parameters.slideDelay);
        }
        this.page++;
        options.putValue("page",this.page);
    }
}

DrawnManager.prototype.prevPage = function() {
    if (this.page > 0) {
        if (this.anim == null) {
            this.anim = beginAnimation("SlideAnim()",this.containerArea.x,this.containerArea.x+this.containerDisplayArea.width,parameters.slideDelay);
        } else {
            cancelAnimation(this.anim);
            this.anim = null;
            this.setPage(this.page);
            this.anim = beginAnimation("SlideAnim()",this.containerArea.x,this.containerArea.x+this.containerDisplayArea.width,parameters.slideDelay);
        }
        this.page--;
        options.putValue("page",this.page);
    }
}

function SlideAnim() {
    slide.x = event.value;
}

DrawnManager.prototype.sortPostIts = function() {
    user.getProject().sortAll();
    updateGui( user.getProject() );
};